<template>
  <q-btn class="button-tag" :color="newUpd ? 'primary' : 'blue-1'" :text-color="newUpd ? 'white' : 'primary'" @click="upInstance">
      <q-icon name="thumb_up" class="q-mr-xs"/> <span v-if="(up || newUpNumber) && newUpNumber !== 0">{{ newUpNumber !== null ? newUpNumber : up }}</span> <span>赞</span>
  </q-btn>
</template>

<script>
    export default {
      name: 'aUp',
      props: {
        type: {
          type: String,
          required: true
        },
        id: {
          type: Number,
          required: true
        },
        up: {
          type: Number,
          required: false,
          default: 0
        },
        upd: {
          type: Boolean,
          required: false,
          default: false
        }
      },
      data () {
        return {
          newUpNumber: null,
          newUpd: null
        }
      },
      created () {
        this.newUpd = this.upd
      },
      computed: {
      },
      watch: {
      },
      methods: {
        async upInstance () {
          if (!this.auth) {
            this.$router.push('/login')
            return
          }

          const { status, data } = await this.postRequest({
            api: '/api/{type}/{id}/up/',
            id: this.id,
            type: this.type
          })

          if (status === 200) {
            this.newUpNumber = data.up_number
            this.newUpd = !this.newUpd
          }
        }
      }
    }
</script>

<style lang="stylus">
</style>
